<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新能源车联网综合大数据平台</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/map.css">
</head>
<body>
<div class="data" style="min-height: 800px;">

    <div class="data-title">
        <div class="title-left fl"></div>
        <div class="title-center fl"></div>
        <div class="title-right fr"></div>
    </div>
    <!-- 概况，数字使用动画data-animate="close"可关闭动画，data-duration可定义动画时长（毫秒）data-refresh="20"自动刷新单位秒-->
    <div class="data-content loadItem" data-url="data/countNum.json" data-type="count" >
        <div class="con-left fl">
            <div class="left-top">
                <div class="info">
                    <div class="info-title">实时统计</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div class="info-main" >
                        <div class="info-1">
                            <div class="info-img fl">
                                <img src="img/info-img-1.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>车辆总数(辆)</p>
                                <p class="_count0">0</p>
                            </div>
                        </div>
                        <div class="info-2">
                            <div class="info-img fl">
                                <img src="img/info-img-2.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>当前在线数(辆)</p>
                                <p class="_count1">0</p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="img/info-img-3.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今日活跃数(辆)</p>
                                <p class="_count2">0</p>
                            </div>
                        </div>
                        <div class="info-4">
                            <div class="info-img fl">
                                <img src="img/info-img-4.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今日活跃率(%)</p>
                                <p class="_count3">0</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-bottom">
                    <div class="title">行业分类</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
					<!-- 饼状图  data-rose南丁格尔玫瑰图 data-label="close"关闭标签data-style="dobulering anticlockwise" anticlockwise逆时针   data-itemborder="2"条目间隔 data-refresh="10"自动刷新单位秒-->
	                <div class="loadItem charts" data-url="data/hangye.json" data-type="pie" data-color='["#af89d6","#4ac7f5","#0089ff","#f36f8a","#f5c847"]' style="margin-top: -5px;"
	                	data-legend-style=" C,vertical,rect,x:70%" data-legend='{"itemGap": 12,"itemWidth": 10,"itemHeight": 10}' data-showtext="tooltip:{a} <br/>{b} : {c}件"
	                	data-ring="60" data-style="ringpie percent" data-itemborder="1" data-series='[{"center": ["35%", "50%"]},{"center":["35%", "50%"]}]'></div>
                    <!-- <div id="echarts_1" class="charts"></div> -->
                </div>
            </div>
            <div class="left-bottom">
                <div class="title">车型分类</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <!-- 饼状图【半环】  data-rose南丁格尔玫瑰图 data-label="close"关闭标签data-style="dobulering anticlockwise" anticlockwise逆时针   -->
				<div class="loadItem charts" data-url="data/chexing.json" data-type="pie" data-color='["#f845f1","#ad46f3","#5045f6","#4777f5","#44aff0"]'
						data-ring='[41, 110]' data-showtext="label:{c}辆"
	                	data-percent="show" data-legend-style="CT,circle" data-style="halfring" data-series='[{"center":["50%", "20%"]}]'></div>
                <!-- <div id="echarts_2" class="charts"></div> -->
            </div>
        </div>
        <div class="con-center fl">
            <div class="map-num">
                <p>实时行驶车辆(辆)</p>
                <!-- 数字动态显示   -->
                <div class="num _count4" data-num-prefix='["<span>","<span class=\"separate\">"]' data-num-suffix='["</span>&thinsp;"]'>
                   <!--  <span >1</span>
                    <span>,</span>
                    <span >2</span>
                    <span >3</span>
                    <span >4</span>
                    <span>,</span>
                    <span >5</span>
                    <span >6</span>
                    <span >7</span> -->
                </div>
            </div>
            <!-- 地图，自定义图，  chinaMap map_extend,data-pointer="circle,max:10,min:3,rgba(255,255,0,0.8)" 控制显示点 data-topdata="5,rgba(255,255,0,0.8)" 显示前几 data-visual-style="color:#22e5e8>#0035f9>#22e5e8,orient:vertical,max:500",其中max代表标尺的最大值，可以使用{max}表示值中最大的-->
            <div class="cen-top loadItem" id="map" data-url="data/mapdata.json" data-type="extend" data-extendfn="chinaMap" data-tooltip-suffix="辆" data-tooltip-show="value,count2,count4"
            	data-pointer="circle,max:10,min:3,rgba(255,255,0,0.8)" data-topdata="5,rgba(255,255,0,0.8)" data-visual-style="color:#22e5e8>#0035f9>#22e5e8,orient:vertical,max:{max}/2,bottom:10%"
            	data-geo-style="area:#031525;#2B91B7 border:#097bba"></div>
            <div class="cen-bottom">
                <div class="title">车辆充电高峰时间</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <!--折线图,data-color覆盖颜色data-style="area " 模式设置多个模式用空格连接area面积模式 smooth平滑模式，data-legend-style="hide" 隐藏图例-->
                	<!-- shieldSettings1='{"series":[{"areaStyle":{"normal": {"type": "default", "color": new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{"offset": 0,"color": "#25f3e6"}, {"offset": 1,"color": "#0089ff"}], false)}}}]}' -->
                <div class="loadItem charts" data-url="data/gaofeng.json" data-type="line" data-style="area smooth nospace" data-color='["#a4d8cc","#25f3e6"]' 
                	data-area-color="#25f3e6>#0089ff" data-grid='{"top":"5%"}' shieldSettings="{'xAxis': {'axisLabel':{'rotate':50}}}" data-legend-style="hide" 
                	></div>
                <!-- <div id="echarts_3" class="charts"></div> -->
            </div>
        </div>
        <div class="con-right fr">
            <div class="right-top">
                <div class="title">本月行驶里程TOP5</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <!-- 饼状图  data-rose南丁格尔玫瑰图 data-label="close"关闭标签data-style="dobulering anticlockwise percent" anticlockwise逆时针avoidLabelOverlap防覆盖   -->
                <div id="echarts_4" class="loadItem charts" data-url="data/licheng.json" data-type="pie"  shieldSettings="{'legend':{data: {}}}" data-rose="area" data-style="percent avoidLabelOverlap" data-color='["#af89d6", "#f5c847", "#ff999a", "#0089ff","#25f3e6"]'
                	data-ring="[20, 100]"></div>
            </div>
            <div class="right-center">
                <div class="title">报警车辆TOP5</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <!-- 柱形图,data-vx表示横向显示，data-legend-style="hide" 隐藏图例    -->
                <div id="echarts_5" class="loadItem charts" data-url="data/baojing.json" data-type="bar"  data-bar-width="20%" data-item-color="#00c0e9>#3b73cf" 
                	data-radius="50" data-grid='{"top":"8"}' data-legend-style="hide" ></div>
            </div>
            <div class="right-bottom">
                <div class="title">电池报警车辆TOP10</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <!-- 柱形图,pictorialBar表示是异形柱形图,柱状图的symboll可以直接用data-symbol设置也可以设置到shieldSettings中data-legend-style="hide" 隐藏图例   -->
                <div id="echarts_6" class="loadItem charts" data-url="data/dchijinggao.json" data-type="bar" data-style="pictorialBar nosplity nosplitx noAxiStickX nolinex tooltip_pointer_none" data-item-color="rgba(13,177,205,0.8);rgba(29,103,182,0.6)" 
                	data-symbol11='path://d="M150 50 L130 130 L170 130  Z"' data-grid-style="left:60,right:60,top:8" shieldSettings="{'yAxis': {'offset': 52},'series':[{'barCategoryGap': '-80%','symbol':'path://d=&quot;M150 50 L130 130 L170 130  Z&quot;'}]}" data-legend-style="hide" ></div>
            </div>
        </div>
    </div>
</div>

	<script type="text/javascript" src="../../js/jquery-2.2.1.min.js"></script>
	<script type="text/javascript" src="../../js/echarts.min.js"></script>
	<script type="text/javascript" src="../../js/point_util.js"></script>
	<script type="text/javascript" src="../../js/china.js"></script>
	<!-- 依赖原数据插件 -->
	<script type="text/javascript" src="../../../webjars/shieldjs/depends/jquery.metadata.js"></script>
	<script type="text/javascript" src="../../../webjars/shieldjs/core/shield.util.js"></script>
	<!-- 处理 -->
	<script type="text/javascript" src="../../js/charts.deal.pie.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.bar.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.line.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.map.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.list.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.count.js"></script>
	<script type="text/javascript" src="../../js/charts.base.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.extend.js"></script>
	<script type="text/javascript" src="../../js/charts.tool.js"></script>
</body>
</html>